<template>
	<div class="statistics">
		<h1>数据展示</h1>
		<!-- 柱状图 -->
		<div class="barContainer"
			ref="bar"></div>
		<!-- 饼图 -->
		<div class="pieContainer"
			ref="pieContainer"></div>
		<!-- 折线图 -->
		<div class="lineContainer"
			ref="lineCon"></div>
	</div>
</template>
<style scoped>
.barContainer,
.lineContainer,
.pieContainer {
	height: 300px;
}
</style>
<script>
	//引入echarts
	import * as echarts from "echarts"
	//引入bar配置
	import barOption from "../../../echarts/barOption"
	//引入环形图配置
	import pieOption from "../../../echarts/pieOption"
	//引入折线图的选项
	import lineOption from "../../../echarts/lineOption"
	//引入发送请求的方法
	import * as statisticsApi from "../../../api/statistics"
	export default {
		methods: {
			//柱状图
			initBarCharts() {
				//初始化柱状图一个容器
				this.barCharts = echarts.init(this.$refs.bar);
				//设置选项
				this.barCharts.setOption(barOption)
			},
			//饼图
			initPieCharts() {
				//初始化一个环形图容器
				this.pieCharts = echarts.init(this.$refs.pieContainer)
				//异步请求打开加载动画
				this.pieCharts.showLoading()
				statisticsApi.taskApi()
					.then(res => {
						console.log(res.data)
						//变更pie图数据
						pieOption.series[0].data = res.data.data
						//重新设置option
						this.pieCharts.setOption(pieOption)
						//关闭加载动画
						this.pieCharts.hideLoading()
					})
			},
			//折线图
			initLineCharts() {
				//初始化一个折线图
				this.lineCharts = echarts.init(this.$refs.lineCon)

				//发起请求
				this.lineCharts.showLoading()//显示加载动画
				statisticsApi.leanStepApi()
					.then(res => {
						// console.log(res.data)
						//对数据进行处理
						let sData = [];//系列中的data
						//x轴中的data
						let xData = res.data.data.map(item => {
							sData.push(item.rate)
							return item.name
						})
						// console.log(sData)
						// console.log(xData)

						//对option重新赋值

						lineOption.xAxis.data = xData;

						lineOption.series[0].data = sData;
						//给echarts设置选项
						this.lineCharts.setOption(lineOption)
						//隐藏加载动画
						this.lineCharts.hideLoading()
					})
			}
		},
		mounted() {
			this.initBarCharts()
			this.initLineCharts()
			this.initPieCharts()
			//监听窗口发生大小改变的时候 让图标自适应
			window.onresize = () => {
				this.lineCharts.resize()
				this.barCharts.resize()
				this.pieCharts.resize()
			}
		}
	}
</script>